<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页布局DEMO</title>
<script type="text/javascript">
	var canvas;
	var ctx;
	var lineHeight;
	var matrix;
	function start() {
		canvas = document.getElementById("canvas");
		if (canvas.getContext) {
			ctx = canvas.getContext("2d");
		}
		lineHeight = 0;
		initMatrix();
		intiButton();
	}
	
	function intiButton(){
		var doc = document.getElementById('buttonBox');
		var button = "<h1>模型支持方块</h1>";
		for(var i = 0; i < 4; i++){
			for(var j = 0; j < 4; j++){
				button += "<button style='width:" + ((i+1) * 40) + "px;height:" + ((j+1) * 40) + "px;margin:5px;' onclick='addGraph(" + (i+1) + ", " + (j+1) + ");'>" + (i+1) + " x " + (j+1) + "方块</button>";
			}
		}
		button += "<h1>模型支持圆块</h1>";
		for(var i = 0; i < 4; i++){
			for(var j = 0; j < 4; j++){
				button += "<button style='width:" + ((i+1) * 40) + "px;height:" + ((j+1) * 40) + "px;margin:5px;border-radius: 25px;' onclick='addGraph(" + (i+1) + ", " + (j+1) + ", drawCircle);'>" + (i+1) + " x " + (j+1) + "圆块</button>";
			}
		}
		doc.innerHTML = button;
	}
	
	function initMatrix(){
		matrix = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]];
	}
	
	function addGraph(w, h, fun){
		if(fun == undefined ){
			fun = drawSquare;
		}
		
		for(var m_h = 0; m_h < 4; m_h++){
			for(var m_w = 0; m_w < 4; m_w++){
				if(matrix[m_h][m_w] == 0){
					if(4 - m_w >= w && 4 - m_h >= h){
						var value = 0;
						for(var m_h_ = m_h; m_h_ < m_h + h; m_h_++ ){
							for(var m_w_ = m_w; m_w_ < m_w + w; m_w_++ ){
								value += matrix[m_h_][m_w_];
							}
						}
						if(value == 0){
							fun(m_w, m_h, w, h);
							for(var m_h_ = m_h; m_h_ < m_h + h; m_h_++ ){
								for(var m_w_ = m_w; m_w_ < m_w + w; m_w_++ ){
									matrix[m_h_][m_w_] = 1;
								}
							}
							return;
						}
					}
				}
			}
		}
		lineHeight += 400;
		initMatrix();
		addGraph(w, h, fun);
	}
	
	function drawSquare(x, y, w, h){
		var x_ = 100 * x + 10;
		var y_ = lineHeight + 100 * y + 10;
		var width_ = 100 * w - 20;
		var height_ = 100 * h - 20;
		ctx.fillRect(x_, y_, width_, height_);
	}
	
	function drawCircle(x, y, w, h) {
		var x_ = 100 * x + 10;
		var y_ = lineHeight + 100 * y + 10;
		var width_ = 100 * w - 20;
		var height_ = 100 * h - 20;
		drawCircle_(x_ + width_ / 2, y_ + height_ / 2, width_ / 2, height_ / 2);
	}
	
	function drawCircle_(centerX, centerY, w, h) {
		ctx.save();
	    var r = (w > h) ? w : h;
	    var ratioX = w / r;
	    var ratioY = h / r;
	    ctx.scale(ratioX, ratioY);
	    ctx.beginPath();
	    ctx.arc(centerX / ratioX, centerY / ratioY, r, 0, 2 * Math.PI, false);
	    ctx.closePath();
	    ctx.restore();
	    ctx.fill();
	}
	
	function clearCanvas(){
		ctx.clearRect(0,0,400,1600);
		lineHeight = 0;
		initMatrix();
	}
</script>
</head>
<body onload="start();">

	<div style="margin:10px;width:1020px;float:left;">
		<div style="margin:10px;width:1000px;float:left;border:1px dotted black;">
			<button style="width:80px;height:50px;margin:5px;" onClick="clearCanvas();">擦除</button>
		</div>
		<div style="margin:10px;width:1000px;float:left;border:1px dotted black;">
			<h1>初步支持方块</h1>
			<button style="width:80px;height:160px;margin:5px;" onClick="addGraph(2, 4);">2 x 4方块</button>
			<button style="width:80px;height:80px;margin:5px;" onClick="addGraph(2, 2);">2 x 2方块</button>
			<button style="width:160px;height:80px;margin:5px;" onClick="addGraph(4, 2);">4 x 2方块</button>
		</div>
		<div id="buttonBox" style="margin:10px;width:1000px;float:left;border:1px dotted black;">
		</div>
	</div>
	<canvas id="canvas" width="400" height="1600"
		style="float:left;background-color: rgba(0, 0, 100, 0.5)"></canvas>

</body>
</html>